<template>
	<view>
		<view class="box">
			<image class="bg-image" src="/static/background.png" mode="aspectFill"></image>
			<view class="content">
				<p class="title">欢迎来到健身私教预约系统</p>
				<view v-if="bool">
					<view class="input-wrapper">
						<input class="input" type="text" v-model="username" placeholder="请输入账号" />
					</view>
					<view class="input-wrapper">
						<input class="input" type="password" v-model="password" placeholder="请输入密码" />
					</view>
					<radio-group v-if="status === 1">
						<text><strong>我的身份</strong></text>
						<radio @click="role = '学员'" checked="true" /><text>学员</text>
						<radio @click="role = '教练'" /><text>教练</text>
					</radio-group>
					<p class="ppp" @click="toRegister" v-if="status === 0">没有账号？去注册</p>
					<p class="ppp" @click="toLogin" v-else>已有账号？去登录</p>
					<button class="btn" @click="loginHandler" v-if="status === 0">登录</button>
					<button class="btn" @click="registerHandler" v-else>注册</button>
				</view>
				<view v-else>
					<input class="input-wrapper" type="text" v-model="baseUrl" placeholder="请输入完整后端地址">
					<button class="btn" @click="backend">进入</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				username: 'wjj',
				password: 123456,
				status: 0,
				role: '学员',
				bool: false,
				baseUrl: ''
			};
		},
		methods: {
			backend() {
				this.bool = true
				uni.setStorageSync('baseUrl', this.baseUrl)
			},
			loginHandler() {
				request({
					url: 'system/usr/list',
					method: 'GET',
					data: {
						username: this.username,
						password: this.password
					}
				}).then(res => {
					if (res.rows[0].username == this.username && res.rows[0].password == this.password) {
						uni.switchTab({
							url: '/pages/index/index',
							success: () => {
								uni.setStorageSync('user', res.rows[0])
							}
						})
					} else {
						uni.showToast({
							title: "账号/密码错误",
							icon: 'error'
						})
					}
				})
			},
			registerHandler() {
				request({
					url: 'system/usr',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password,
						role: this.role
					}
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							success: () => {
								this.status = 0
							}
						})
					} else {
						uni.showToast({
							title: '注册失败，请重试',
							icon: 'error',
						})
					}
				})
			},
			toRegister() {
				this.status = 1
			},
			toLogin() {
				this.status = 0
			}
		}
	}
</script>

<style lang="scss">
	.box {
		height: 100vh;
		width: 100%;
		position: relative;
		overflow: hidden;

		.bg-image {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.content {
			position: relative;
			z-index: 2;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
		}

		.title {
			margin: 0 auto;
			font-size: 20px;
			padding-top: 80px;
			padding-bottom: 40px;
			text-align: center;
			text-shadow:
				-1px -1px 0 #000,
				1px -1px 0 #000,
				-1px 1px 0 #000,
				1px 1px 0 #000;
			color: #aaa;
		}

		.input-wrapper {
			margin: 10px auto;
			width: 70%;
			background: rgba(255, 255, 255, 0.9);
			border: 1px solid #eee;
			border-radius: 3px;

			.input {
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				padding: 0 10px;
				border: none;
				background: transparent;
			}
		}

		radio-group {
			margin: 10px auto;
			padding: 5px 0;
			width: 70%;
			background-color: rgba(255, 255, 255, 0.9);
			border: 1px solid #eee;
			border-radius: 3px;

			strong {
				margin-left: 10px;
			}

			radio {
				margin-left: 30px;
			}
		}

		.ppp {
			font-size: 24rpx;
			text-align: center;
			color: #aaa;
			text-shadow:
				-1px -1px 0 #000,
				1px -1px 0 #000,
				-1px 1px 0 #000,
				1px 1px 0 #000;
			margin: 20rpx 0;
		}

		.btn {
			margin: 20rpx auto;
			width: 40%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.9);
			color: #333;
			border: 1px solid #eee;
			border-radius: 3px;
			font-size: 28rpx;

			&:active {
				background: rgba(238, 238, 238, 0.9);
			}
		}
	}
</style>